<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input clearable v-model="formInline.projectName" placeholder="" style="width: 180px" />
        </el-form-item>
        <el-form-item label="	医院名称">
          <el-select v-model="formInline.hospitalDictId" placeholder="" style="width: 180px" clearable>
            <el-option v-for="item in yyoptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-form-item label="项目状态">
            <el-select v-model="formInline.status" placeholder="" style="width: 180px" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchbutton">搜索</el-button>
            <el-button type="primary" @click="addbutton">新增</el-button>
            <el-button type="primary" @click="xgbutton">修改</el-button>
            <el-button type="primary" @click="deletebutton">删除</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist.rows" border max-height="500" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="projectName" label="项目名称" />
          <el-table-column prop="hospitalName" label="医院名称" />
          <el-table-column prop="projectStatus" label="状态" />
          <el-table-column prop="remark" label="备注" />
        </el-table>
        <div class="fybox">
          <el-pagination
            v-model:current-page="formInline.pageNum"
            v-model:page-size="formInline.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager"
            :total="pagetotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="字典详情" width="600" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="auto" ref="ruleFormRef" :rules="rules">
        <el-form-item label="项目名称" prop="projectName"> <el-input v-model="ruleForm.projectName" /> </el-form-item>
        <el-form-item label="医院名称" prop="hospitalDictId">
          <el-select v-model="ruleForm.hospitalDictId">
            <el-option v-for="item in yyoptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态" prop="projectStatusDictId">
          <el-select v-model="ruleForm.projectStatusDictId" placeholder="">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { addlistApi, teamApi, xqxmApi, xmsaveApi, deleteApi, seekdataApi } from "@/api/system/system.js";
const router = useRouter();
let dialogVisible = ref(false);
let datalist = reactive({ rows: [] });
const yblxlist = [
  {
    id: "Option1",
    name: "Option1"
  },
  {
    id: "Option2",
    name: "Option2"
  }
];
const ruleFormRef = ref();
const rules = reactive({
  projectName: [{ required: true, message: "项目名称", trigger: "blur" }],
  hospitalDictId: [{ required: true, message: "医院名称", trigger: "blur" }],
  projectStatusDictId: [{ required: true, message: "字典状态", trigger: "change" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
});
let ruleForm = ref({
  projectName: "",
  hospitalDictId: "",
  status: 0,
  remark: ""
});
const options = ref([]);
const yyoptions = ref([]);

var pagetotal = ref(0);
let handleSizeChange = () => {
  getlist();
};
let handleCurrentChange = () => {
  getlist();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
const searchbutton = () => {
  getlist();
};
const handleClose = done => {
  dialogVisible.value = false;
};
const addbutton = () => {
  ruleForm.value = {
    projectName: "",
    hospitalDictId: "",
    status: "0",
    remark: ""
  };

  dialogVisible.value = true;
};
let selection = ref([]);
const handleSelectionChange = e => {
  selection.value = e;
};
const xgbutton = () => {
  if (selection.value.length == 1) {
    xqxmApi({
      e: selection.value[0].id
    }).then(res => {
      dialogVisible.value = true;
      ruleForm.value = res.data;
      xgstatus.value = true;
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const deletebutton = () => {
  if (selection.value.length == 1) {
    ElMessageBox.confirm("确定删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      deleteApi({
        e: selection.value[0].id
      }).then(res => {
        ElMessage({
          type: "success",
          message: `${res.msg}`
        });
        getlist();
      });
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
function savebutton(formEl) {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      //修改
      if (xgstatus.value == true) {
        xmsaveApi(ruleForm.value).then(() => {
          ElMessage({
            message: "修改成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          xgstatus.value = false;
          //刷新列表数据
          getlist();
        });
      } else {
        //新增
        teamApi(ruleForm.value).then(() => {
          ElMessage({
            message: "新增成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          getlist();
        });
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
//获取字典列表
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  projectName: "", //	项目名称
  status: "", //项目状态
  hospitalDictId: "", //医院名称
  beginTime: "",
  endTime: ""
});
getlist();
// 获取字典列表
async function getlist() {
  try {
    // 解构参数，避免多次访问 formInline.value
    const { pageNum, pageSize, projectName, status, hospitalDictId, beginTime, endTime } = formInline.value;
    // 调用 API 获取数据
    const { rows, total } = await addlistApi({
      pageNum,
      pageSize,
      projectName,
      hospitalDictId,
      status,
      beginTime,
      endTime
    });
    // 更新响应式数据
    datalist.rows = rows;
    pagetotal.value = total;
  } catch (error) {
    ElMessage.error(error);
  }
}
let xgstatus = ref(false);

getYz();
function getYz() {
  seekdataApi({ dictType: "sys_project_status" }).then(res => {
    options.value = res.data.map(item => ({
      value: item.dictValue,
      label: item.dictLabel
    }));
  });
  seekdataApi({ dictType: "sys_hospital_name" }).then(res => {
    yyoptions.value = res.data.map(item => ({
      value: item.dictValue,
      label: item.dictLabel
    }));
  });
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409eff;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
</style>
